<template>
<div>
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><router-link to="/verifies">申请人列表</router-link></li></li>
    <li class="breadcrumb-item">申请人详情</li>
  </ol>
  <div  class="verify-continer">
      <div class="row">
        <div class="col-sm-12">
            <div class="form-group-alt-attached">
              <div class="row">
                <div class="col-sm-6 col-sm-6">
                  <div class="form-group form-group-alt">
                    <label>真实姓名</label>
                    <span class="form-control color999 flex-center">{{verify.name}}</span>
                    <span></span>
                  </div>
                </div>
                <div class="col-sm-6 col-sm-6">
                  <div class="form-group form-group-alt">
                    <label>用户</label>
                    <span class="form-control color999 flex-center">
                      <router-link :to="'/userdetail/'+verify.user.id">{{verify.user.name}}</router-link>
                    </span>
                    <span></span>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-12">
                  <div class="form-group form-group-alt">
                    <label>认证描述</label>
                    <span class="form-control heightAuto color999 flex-center">{{verify.summary}}</span>
                    <span></span>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group form-group-alt">
                    <label>手机号码</label>
                    <span class="form-control color999 flex-center">{{verify.phone}}</span>
                    <span></span>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="form-group form-group-alt">
                    <label>身份证号码</label>
                    <span class="form-control color999 flex-center">{{verify.credentialNum}}</span>
                    <span></span>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="form-group form-group-alt">
                    <label class="flex-center">创建时间</label>
                    <span class="form-control color999 flex-center">{{verify.createTime}}</span>
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
  </div>
  <div class="verify-continer mt-3">
    <div class="verify-d">
      <div @click="verFirstShow" class="cursor">职称/称号 证明材料(点击切换显示)：</div>
      <span class="verify-d-img" :class="{'none':verifyF==false}"><img :src="verify.fullFileFirst" ></span>
    </div>
  </div>
  <div class="verify-continer mt-3">
    <div class="verify-d">
      <div @click="verSecondShow" class="cursor">身份证明材料(点击切换显示)：</div>
      <span class="verify-d-img" :class="{'none':verifyT==false}"><img :src="verify.fullFileSecond" ></span>
    </div>
  </div>
  <div class="verify-continer clearfloat mt-3">
    <div class="verify-btn fr btn btn-success cursor ml-3">审核通过</div>
    <div class="verify-btn fr btn btn-secondary cursor">审核失败</div>
  </div>
</div>
</template>

<script>
import { UserVerify } from '../../../resources'
import { formatTime,viewImg, clearViewImg } from '../../../misc/utils'
import $ from 'jquery'

  export default {
    data: () => ({
      loading: 0,
      verify:'',
      verifyF:true,
      verifyT:true
    }),
    beforeRouteEnter (to, from, next) {
      var params={
        id:to.params.id
      }
      var request = [UserVerify.detail(params)]
      Promise.all(request).then(([res]) => {
        res.data.data.createTime=formatTime(res.data.data.createTime)
        next(vm =>{
          vm.verify=res.data.data;
        })
      })
    },
    mounted () {
      this.$emit('loaded',false)
    },
    methods: {
      verFirstShow(){
        this.verifyF=!this.verifyF;
      },
      verSecondShow(){
        this.verifyT=!this.verifyT;
      }
    },
    components: {}
  }
</script>
<style>
.heightAuto{
  height: auto !important;
}
.verify-btn{
  display: inline-block;
}
.verify-continer{
  margin: 0 16px;
  background: #fff;
  padding: 10px;
}
.verify-d img{
  max-height: 400px;
}
</style>